<template>
  <view class="home-container">
    <!-- 顶部用户信息栏 -->
    <view class="header">
      <view class="user-info">
        <view class="avatar">
          <text class="avatar-icon">👤</text>
        </view>
        <view class="user-details">
          <text class="username">{{ username }}</text>
          <text class="user-id">{{ userId }}</text>
        </view>
      </view>
      <view class="logout-btn" @click="handleLogout">
        <text class="logout-text">退出</text>
      </view>
    </view>

    <!-- 数据卡片区域 -->
    <view class="cards-container">
      <!-- 第一行 -->
      <view class="card-row">
        <view class="data-card">
          <text class="card-label">今日门急诊处方数</text>
          <text class="card-value">{{ todayPrescription }}</text>
        </view>
        <view class="data-card">
          <text class="card-label">今日医嘱数</text>
          <text class="card-value">{{ todayOrders }}</text>
        </view>
      </view>

      <!-- 第二行 -->
      <view class="card-row">
        <view class="data-card clickable" @click="navigateTo('audit')">
          <text class="card-label">待审核门急诊处方</text>
          <view class="card-content">
            <text class="card-value">{{ pendingAuditPrescription }}</text>
            <text class="arrow">›</text>
          </view>
        </view>
        <view class="data-card clickable" @click="navigateTo('review')">
          <text class="card-label">待降级门急诊处方</text>
          <view class="card-content">
            <text class="card-value">{{ pendingReviewPrescription }}</text>
            <text class="arrow">›</text>
          </view>
        </view>
      </view>

      <!-- 第三行 -->
      <view class="card-row">
        <view class="data-card clickable" @click="navigateTo('inpatient')">
          <text class="card-label">待审核住院医嘱</text>
          <view class="card-content">
            <text class="card-value">{{ pendingInpatientOrders }}</text>
            <text class="arrow">›</text>
          </view>
        </view>
        <view class="data-card clickable" @click="navigateTo('residence')">
          <text class="card-label">待降级住院医嘱</text>
          <view class="card-content">
            <text class="card-value">{{ pendingResidenceOrders }}</text>
            <text class="arrow">›</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      username: "胡铭",
      userId: "AZ10901",
      todayPrescription: 22,
      todayOrders: 50,
      pendingAuditPrescription: 9,
      pendingReviewPrescription: 9,
      pendingInpatientOrders: 69,
      pendingResidenceOrders: 2,
    };
  },
  onLoad() {
    // 检查登录状态
    const isLogin = uni.getStorageSync("isLogin");
    if (!isLogin) {
      uni.reLaunch({
        url: "/pages/login/login",
      });
      return;
    }

    // 获取用户名
    const storedUsername = uni.getStorageSync("username");
    if (storedUsername) {
      this.username = storedUsername === "admin" ? "胡铭" : storedUsername;
    }

    // 这里可以调用接口获取实际数据
    // this.loadData();
  },
  methods: {
    // 加载数据（预留接口）
    loadData() {
      // 这里可以调用后端接口获取实际数据
      // 由于是纯前端项目，暂时使用模拟数据
    },

    // 退出登录
    handleLogout() {
      uni.showModal({
        title: "提示",
        content: "确定要退出登录吗？",
        success: (res) => {
          if (res.confirm) {
            // 清除登录状态
            uni.removeStorageSync("isLogin");
            uni.removeStorageSync("username");

            uni.showToast({
              title: "已退出",
              icon: "success",
              duration: 1500,
            });

            setTimeout(() => {
              uni.reLaunch({
                url: "/pages/login/login",
              });
            }, 1500);
          }
        },
      });
    },

    // 导航到详情页
    navigateTo(type) {
      if (type === "audit") {
        // 跳转到待审核门急诊处方页面
        uni.navigateTo({
          url: "/pages/audit/audit",
        });
      } else if (type === "review") {
        // 跳转到待降级门急诊处方页面
        uni.navigateTo({
          url: "/pages/review/review",
        });
      } else if (type === "inpatient") {
        // 跳转到待审核住院医嘱页面
        uni.navigateTo({
          url: "/pages/inpatient/inpatient",
        });
      } else if (type === "residence") {
        // 跳转到待降级住院医嘱页面
        uni.navigateTo({
          url: "/pages/residence/residence",
        });
      } else {
        uni.showToast({
          title: "功能开发中",
          icon: "none",
        });
      }
    },
  },
};
</script>

<style scoped>
.home-container {
  background: linear-gradient(180deg, #4375fb 0%, #8e6bfd 100%);
  overflow: hidden;
}

/* 顶部用户信息栏 */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 40rpx 30rpx;
  background: linear-gradient(135deg, #4375fb 0%, #8e6bfd 100%);
  box-shadow: 0 4rpx 20rpx rgba(67, 117, 251, 0.2);
}

.user-info {
  display: flex;
  align-items: center;
}

.avatar {
  width: 100rpx;
  height: 100rpx;
  background: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
}

.avatar-icon {
  font-size: 50rpx;
  color: #4375fb;
}

.user-details {
  display: flex;
  flex-direction: column;
}

.username {
  font-size: 36rpx;
  color: #ffffff;
  font-weight: bold;
  margin-bottom: 8rpx;
}

.user-id {
  font-size: 24rpx;
  color: rgba(255, 255, 255, 0.9);
}

.logout-btn {
  padding: 12rpx 30rpx;
}

.logout-text {
  font-size: 28rpx;
  color: #ffffff;
}

/* 数据卡片区域 */
.cards-container {
  height: calc(100vh - 370rpx);
  margin-top: 176rpx;
  padding: 26px;
}

.card-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30rpx;
}

.data-card {
  width: calc(100% / 2 - 80rpx);
  background: #ffffff;
  border-radius: 16rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
}

.card-label {
  display: block;
  font-size: 26rpx;
  color: #666666;
  margin-bottom: 20rpx;
}

.card-value {
  display: block;
  font-size: 56rpx;
  color: #4375fb;
  font-weight: bold;
}

.data-card.clickable {
  position: relative;
}

.card-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.arrow {
  font-size: 60rpx;
  color: #cccccc;
  font-weight: 300;
}
</style>
